<style lang="scss">
@import '../../styles/base';
.my {
  width: 100%;
  height: 100%;
  min-height: 100vh;
  background: #eef4f7;
  .content {
    background: #fff;
    .head-info {
      background: #316acc;
      height: 450rpx;
      border-radius: 0 0 30% 30%;
      position: relative;
    }
    .user-info {
      padding: 130rpx 0 0 89rpx;
      overflow: hidden;
      .portrait {
        float: left;
        margin-right: 10rpx;
      }
      .user-name {
        float: left;
        color: #fff;
        .name {
          font-size: 30rpx;
        }
        .user-id {
          font-size: 26rpx;
        }
      }
    }
    .menu-cross {
      padding: 18rpx 0;
      .menu-item-cross {
        display: inline-block;
        width: 49%;
        position: relative;
        text-align: center;
        &:nth-child(1) {
          border-right: 1rpx solid #3d83fd;
        }
        .menu-cross-icon {
          color: red;
          margin-right: 10rpx;
        }
        .follow {
          position: relative;
          bottom: 3rpx;
        }
        .menu-cross-text {
          font-size: 28rpx;
          display: inline-block;
        }
      }
    }
  }
  .menu {
    margin-top: 15rpx;
    .set-up {
      margin-top: 15rpx;
    }
    .document-icon {
      color: #f55348;
    }
    .set-up-icon {
      color: #fd9840;
    }
    .group-icon {
      color: #4286fd;
    }
  }
}
</style>
<template>
  <div class="my">
    <div class="content">
      <div class="head-info">
        <div class="user-info">
          <i-avatar
            class="portrait"
            src="https://i.loli.net/2017/08/21/599a521472424.jpg"
            size="large"
          ></i-avatar>
          <div class="user-name">
            <div class="name">Holiday Li</div>
            <div class="user-id">ID:5712565185</div>
          </div>
        </div>
      </div>
      <div class="menu-cross">
        <div class="menu-item-cross">
          <i-icon
            class="menu-cross-icon follow"
            size="18"
            type="like_fill"
          />
          <div class="menu-cross-text">我的关注</div>
        </div>
        <div class="menu-item-cross">
          <i-icon
            class="menu-cross-icon"
            size="18"
            type="customerservice_fill"
          />
          <div class="menu-cross-text">客户服务</div>
        </div>
      </div>
    </div>
    <div class="menu">
      <i-cell-group>
        <i-cell
          title="我的团队"
          is-link
        >
          <i-icon
            type="group_fill"
            slot="icon"
            class="group-icon"
            size="18"
          />
        </i-cell>
        <i-cell
          title="我的能源账单"
          is-link
        >
          <i-icon
            type="document"
            slot="icon"
            class="document-icon"
            size="18"
          />
        </i-cell>
        <i-cell
          title="设置"
          is-link
          i-class="set-up"
        >
          <i-icon
            type="setup"
            slot="icon"
            class="set-up-icon"
            size="18"
          />
        </i-cell>
      </i-cell-group>
    </div>
  </div>
</template>
<script>
import { APP_ID } from "../../config";
import { $Message } from "../../../static/iview/base/index.js";

export default {
  data () {
    return {
    };
  },
  components: {},
  methods: {},
  async onHide () { },
  async onShow () { },
  async onUnload () { }
};
</script>
